export function drawCanvas(map) {
  var canvas = document.createElement('canvas')
  var ctx = canvas.getContext('2d')
  let radius = 10
  var increase = true

  function draw() {
    let size = 200
    canvas.width = size
    canvas.height = size

    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    // 第一个圆
    ctx.beginPath()
    ctx.arc(100, 100, radius, 0, (Math.PI / 180) * 360)
    ctx.closePath()
    ctx.fillStyle = 'rgba(255,20,147,0.8)'
    ctx.fill()
    /* 第二个圆 */
    ctx.beginPath()
    ctx.arc(100, 100, 10, 0, (Math.PI / 180) * 360)
    ctx.closePath()
    ctx.fillStyle = 'rgba(0,0,205,0.6)'
    ctx.fill()
    if (radius > 23) {
      increase = false
    } else if (radius < 10) {
      increase = true
    }
    if (increase) {
      radius++
    } else {
      radius--
    }
    setTimeout(draw, 100)
    /* render(); canvas和openlayer结合,需要让地图重新渲染 */
    map.render()
  }
  draw()
  return canvas
}
